//导入模块
const gulp = require('gulp')
const uglify = require('gulp-uglify') //压缩，去注释
const babel = require('gulp-babel')  //js兼容
const rev = require('gulp-rev')
const revCollector = require('gulp-rev-collector')
const cssmin = require('gulp-minify-css')
const imagemin = require('gulp-imagemin')
const minifyhtml = require('gulp-minify-html')

// 开发服务器配置
const { createProxyMiddleware } = require('http-proxy-middleware')
const server = require('browser-sync').create();
const watch = require('gulp-watch');

gulp.task('serve', () => {
    server.init({
        //server:'./src'
        server: {
            baseDir: './src',
            middleware: [
                // ...
                createProxyMiddleware('/api', {
                    // 目标服务器网址
                    target: "http://tmp00001.zhaodashen.cn",
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        // 重写
                        // '^/old/api' : '/new/api'
                        // 移除
                        '^/api': ''
                        // 添加
                        // '^/' : '/basepath/'
                    },
                })
            ]
        },

        port: 80
    })

    watch('src/*.html', function () {
        console.log('你修改了html文件了');
        server.reload()
    })

    watch('src/css/*.css', function () {
        console.log('你修改了css文件了');
        server.reload()

        watch('src/js/*.js', function () {
            console.log('你修改了js文件了');
            server.reload()
        })
    })
})


gulp.task('html', () => {
    gulp
        //.src('src/*.html')
        .src(['temp/**/*.json', 'src/**/*.html'])
        .pipe(revCollector({
            replaceReved: true,
            dirReplacements: {
                './css': './css',
                './js': './js',

            }

        })
        )
        .pipe(minifyhtml())
        .pipe(gulp.dest('dist'))

})

gulp.task('imgs', over => {
    gulp
        .src('src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'))

    setTimeout(() => {
        over()
    }, 30000)
})




gulp.task('css', over => {
    gulp
        .src('src/css/*.css')
        .pipe(cssmin())
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'))


    over()
})


gulp.task('js', over => {
    //读取js文件去注释去空格搞缓存
    gulp
        .src('./src/js/*.js')

        .pipe(babel({ "presets": ["env"] }))
        .pipe(uglify())
        .pipe(rev())

        .pipe(gulp.dest('dist/js'))

        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'))

    over()
})


gulp.task('build', gulp.series('js', 'css', 'imgs', 'html', () => {
    console.log('build ok');
}))


// gulp.task('a1',over => {
//     console.log('this is a1');
//     over()
// })

// gulp.task('a2',over => {
//     console.log('this is a2');
//     over()
// })
// gulp.task('build', () => {
//     console.log('this is build ok');
// })

// gulp.task('build',gulp.series('a1','a2',() => {
//     console.log('ok');

// }))